<template>
    <div class="employee-management">
        <!-- 标题 -->
        <!-- <el-row class="header" justify="center" align="middle"> -->
        <!-- <el-col :span="24">
                <h2>新增员工</h2>
            </el-col> -->
        <!-- </el-row> -->

        <!-- 员工注册 -->
        <!-- <el-row class="register-form" justify="center" align="middle">
            <el-col :span="8">
                <el-form :model="newEmployeeForm" ref="newEmployeeFormRef" label-width="100px">
                    <el-form-item label="姓名" prop="name"
                        :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                        <el-input v-model="newEmployeeForm.name" placeholder="请输入员工姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="身份" prop="role"
                        :rules="[{ required: true, message: '请选择员工身份', trigger: 'change' }]">
                        <el-select v-model="newEmployeeForm.role" placeholder="选择身份">
                            <el-option label="员工" value="employee"></el-option>
                            <el-option label="管理员" value="admin"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="phone"
                        :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                        <el-input v-model="newEmployeeForm.phone" placeholder="请输入员工联系方式"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="registerEmployee">注册员工</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row> -->
        <!-- 标题 -->
        <el-row class="header" justify="center" align="middle">
            <el-col :span="24">
                <h2>全体在职员工管理</h2>
            </el-col>
        </el-row>
        <!-- 员工列表 -->
        <el-row class="employee-list" justify="center" align="middle">
            <el-col :span="24">
                <el-table :data="employees" style="width: 100%">
                    <el-table-column label="编号" prop="userId" />
                    <el-table-column label="姓名" prop="realName" />
                    <el-table-column label="账号" prop="username" />
                    <el-table-column label="身份" prop="userType">
                        <template #default="{ row }">
                            {{ row.userType === 'staff' ? '员工' : '管理员' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式" prop="phone" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="editEmployee(row)">编辑</el-button>
                            <el-button type="text" @click="deleteEmployee(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 编辑员工弹窗 -->
        <el-dialog v-model="editDialogVisible" title="编辑员工">
            <el-form :model="selectedEmployee" ref="editEmployeeFormRef" label-width="100px">
                <el-form-item label="姓名" prop="realName"
                    :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                    <el-input v-model="selectedEmployee.realName" placeholder="请输入员工姓名"></el-input>
                </el-form-item>
                
                <el-form-item label="账号" prop="username"
                    :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
                    <el-input v-model="selectedEmployee.username" placeholder="请输入员工账号"></el-input>
                </el-form-item>

                <el-form-item label="身份" prop="userType"
                    :rules="[{ required: true, message: '请选择员工身份', trigger: 'change' }]">
                    <el-select v-model="selectedEmployee.userType" placeholder="选择身份">
                        <el-option label="员工" value="staff"></el-option>
                        <el-option label="管理员" value="admin"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="联系方式" prop="phone"
                    :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                    <el-input v-model="selectedEmployee.phone" placeholder="请输入员工联系方式"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveEmployee">保存</el-button>
                    <el-button @click="editDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElForm, ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElRow, ElCol, ElDialog } from 'element-plus';
import type { Employee } from '@/API/interface/staffStatus'
import { getAllUsers,updateUserApi,deleteUserApi } from '@/API/interface/staffStatus';
// 定义员工注册表单
// const newEmployeeForm = ref({
//     name: '',
//     role: 'employee',
//     phone: '',
// });
// const newEmployeeFormRef = ref<InstanceType<typeof ElForm>>();

onMounted(() => {
    getAllUsers().then((res) => {
        console.log(res);
        employees.value = res.data.data;
    });
});
// 员工列表
const employees = ref<Employee[]>([]);

// 编辑员工表单
const selectedEmployee = ref<Employee>({
    userId: '',
    username: '',
    userType: '',
    phone: '',
    realName: '',
});
// 编辑员工信息组件
const editDialogVisible = ref(false);

// 注册新员工
// const registerEmployee = () => {
//     if (!newEmployeeForm.value.name || !newEmployeeForm.value.phone) {
//         return;
//     }

//     const newEmployee: Employee = {
//         id: employees.value.length + 1, // 简单的id生成方式
//         name: newEmployeeForm.value.name,
//         role: newEmployeeForm.value.role,
//         phone: newEmployeeForm.value.phone,
//     };

//     employees.value.push(newEmployee);
//     newEmployeeForm.value.name = '';
//     newEmployeeForm.value.role = 'employee';
//     newEmployeeForm.value.phone = '';
// };

// 编辑员工信息
const editEmployee = (employee: Employee) => {
    selectedEmployee.value = { ...employee };
    editDialogVisible.value = true;
};

// 保存编辑的员工信息
const saveEmployee = async () => {
    console.log('保存员工信息', selectedEmployee.value);
    await updateUserApi(selectedEmployee.value).then(
        (res) => {
            console.log('更新员工信息反馈', res.data);
            getAllUsers();
            editDialogVisible.value = false;
        }
    )
};

// 删除员工
const deleteEmployee = async (employee: Employee) => {
    console.log('删除员工', selectedEmployee.value.userId);
    await deleteUserApi(employee.userId).then(
        (res) => {
            console.log('删除员工反馈', res.data);
            getAllUsers();
        }
    )
}
</script>

<style lang="less" scoped>
.employee-management {
    padding: 20px;
}

.header {
    margin-bottom: 20px;
}

.register-form {
    margin-bottom: 30px;
}

.employee-list {
    margin-top: 30px;
}

.el-table {
    margin-top: 20px;
}

.el-dialog {
    width: 50%;
}
</style>